<template>
	<view>
<!-- 头部 -->
  <up-navbar>      
	<template #left>
   <div style="display: flex;align-items: center;"> 
      <up-icon
    name="arrow-left"
         size="19"
	 @tap="backPage"
        ></up-icon>
   <div class="login_tit">账号密码登录  
   <div class="line"></div>
   </div>
   
   </div>            
	</template>
</up-navbar>
<!-- 头部 -->
 <div style="height:354rpx;"></div>
<!-- 表单 -->
<up-form
			labelPosition="left"
			:model="model1"
			:rules="rules"
			class="login_form"
		>
			<up-form-item
					label="账号"
					prop="userInfo.account"
					:borderBottom="true"
				
			>
				<up-input
						v-model="model1.userInfo.account"
						border="none"
							placeholder="生涯大账号"
				></up-input>
			</up-form-item>
			<up-form-item
					label="密码"
					prop="userInfo.password"
					:borderBottom="true"
			>
				<up-input
				     :type="isShowEye?'text':'password'"
					v-model="model1.userInfo.password"
							placeholder="请输入密码"
					border="none"
				>
			</up-input>
			</up-form-item>
			<!-- 记住密码选项 -->
			<div class="remember-container">
				<up-checkbox    v-model:checked="rememberPassword"  @change="handleRememberPassword" shape="circle" size="20"  label="记住账号密码">记住账号密码</up-checkbox>
			</div>
	</up-form>    
		<div class="box1"><up-button text="登录" color="linear-gradient(to right, #93D2F3, #4095E5 100%)" class="login_btn1" @tap="AccountLogin"></up-button></div>

<!-- 表单 -->
	</view>
</template>

<script setup>
	import { ref, getCurrentInstance, onMounted } from 'vue';
	import { UserLogin } from '../../utils/api';
   const model1 = ref({
	   userInfo:{
		   account:'',
		   password:''
	   }
   })
   const rules = ref({
	   'userInfo.account': {  
      type: 'string',  
      required: true,  
      message: '请填写账号',  
      trigger: ['blur', 'change'],  
    },  
    'userInfo.password': {  
      type: 'string',   
      required: true,  
      message: '请填写密码',  
      trigger: ['blur', 'change'],  
    },  
   })
// 使用 ref 创建响应式引用  
const formRef = ref(null);  
const isShowEye = ref(false)  
// 记住密码状态
const rememberPassword = ref(false)
const handleRememberPassword =(E)=>{
	 console.log(E)
	 rememberPassword.value = E
}
// 获取全局属性
const { proxy } = getCurrentInstance();

// 页面加载时，从本地存储读取账号密码
onMounted(() => {
	const savedAccount = uni.getStorageSync('savedAccount');
	const savedPassword = uni.getStorageSync('savedPassword');
	if (savedAccount && savedPassword) {
		model1.value.userInfo.account = savedAccount;
		model1.value.userInfo.password = savedPassword;
		rememberPassword.value = true;
	}
});

// 登录方法
const AccountLogin = async ()=>{
     if(model1.value.userInfo.account =='' || model1.value.userInfo.password ==''){
		uni.showToast({
			title: '请填写账号密码',
			icon: 'none'
		})
		return
	}
     try {
          let res = await UserLogin({
			username:model1.value.userInfo.account,
		    password:model1.value.userInfo.password
		})
		console.log(12345)
		console.log(res,'1111')
		if(res.code == 200){
			uni.clearStorage();
			uni.clearStorageSync();
		
			// 如果用户选择记住密码，则保存到本地存储
			if(rememberPassword.value){
				uni.setStorageSync('savedAccount', model1.value.userInfo.account);
				uni.setStorageSync('savedPassword', model1.value.userInfo.password);
			}
			// 保存到本地存储，永久记录已同意
			uni.setStorageSync('agreedPolicy', true)
			//跳转到首页  
		   uni.setStorageSync('token',res.data)
		    	uni.showToast({
				title: '登录成功',
				icon: 'success',
				duration: 2000
			})
			uni.switchTab({
				url:'/pages/workbenches/workbenches'
			})
		}
	 }catch(e){
		 console.log(e)
	 }
}
const backPage = ()=>{
	  uni.navigateTo({
		url: '/pages/login/login',
	  })
}

</script>

<style lang="scss">
	.login_form {
		  padding-left: 66rpx;
		  padding-right:40rpx;
		 
	}
	.remember-container {
		margin-top: 20rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
	}
.login_tit {
	width: 192rpx;
	height: 46rpx;
	line-height: 46rpx;
	color: rgba(64,149,229,1);
	font-size: 32rpx;
	text-align: left;
	font-family: PingFangSC-regular;
	margin-left: 32rpx;
		 
	.line {
		width: 204rpx;
		height: 2rpx;
		line-height: 40rpx;
		border-radius: 6rpx;
		background-color: rgba(64,149,229,1);
		color: rgba(16,16,16,1);
		font-size: 28rpx;
		text-align: center;
		font-family: -regular;
	}
}
.box1 {
	 width:100%;
	 margin-top:50rpx;
	 display: flex;
	 justify-content: center;
	 .login_btn1 {
		width: 638rpx;
	height: 82rpx;
	line-height: 44rpx;
	border-radius: 8rpx;
	background: linear-gradient(88.71deg, rgba(147,210,243,1) 15.3%,rgba(64,149,229,1) 74.51%);
	color: rgba(255,255,255,1);
	font-size: 30rpx;
	text-align: center;
	box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(206,206,206,0.37);
	font-family: -regular;
	 }
}
.remember-container  {
	 display: flex;
	 align-items: center;
}
</style>
